<template>
  <div>
    <!-- 导航 -->
    <div id="header">
      <div class="header-wrap">
        <img class="logo"
             src="../../../public/images/homePage/logo.png"
             alt />
        <div class="nav">
          <ul>
            <li class="navactive oli"
                @click="cutoli">
              <a href="javascript:">网站首页</a>
            </li>
            <li class="oli"
                @click="cutoli">
              <a href="javascript:">公司简介</a>
            </li>
            <li class="oli"
                @click="cutoli">
              <a href="javascript:">业务板块</a>
            </li>
            <li class="oli"
                @click="cutoli">
              <a href="javascript:">营运项目</a>
            </li>
            <li class="oli"
                @click="cutoli">
              <a href="javascript:">公司组织架构</a>
            </li>
            <li class="oli"
                @click="cutoli">
              <a href="javascript:">合作伙伴</a>
            </li>
            <li class="oli"
                @click="cutoli">
              <a href="javascript:">团队介绍</a>
            </li>
            <li class="oli"
                @click="cutoli">
              <a href="javascript:">线上APP</a>
            </li>
            <li class="oli"
                @click="cutoli">
              <a href="javascript:">联系我们</a>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <!-- banner -->
    <div id="banner">
      <!-- <div class="banner-warp"> -->
      <swiper :options="swiperOption"
              ref="mySwiper">
        <swiper-slide>
          <div class="swip-txt">
            <span class="swip-type">
              我们秉承的理念
              <br />品质和服务是发展的原动力
            </span>
          </div>
          <img src="../../../public/images/homePage/c8052f2a7fa39dddd65a0439c001a1b.png"
               alt />
        </swiper-slide>
        <swiper-slide>
          <span class="swip-type">
            我们的核心竞争力
            <br />拥有强大的ERP系统，实现企业的自动化管理
          </span>
          <img src="../../../public/images/homePage/3279d7383243794d8a3a96302aecb1e.png"
               alt />
        </swiper-slide>
        <swiper-slide>
          <span class="swip-type">
            我们的企业愿景
            <br />做一家有价值且充满幸福感的企业
          </span>
          <img src="../../../public/images/homePage/dc80758fc9fc23d71c385861e3c4b3e.png"
               alt />
        </swiper-slide>
        <div id="swiper-pag"
             class="swiper-pagination"
             slot="pagination"></div>
      </swiper>
      <!-- </div> -->
    </div>
    <!-- 关于荣运达 -->
    <div id="regard">
      <div class="reg-left">
        <div class="reg-left-img">
          <img src="../../../public/images/homePage/regard.png"
               alt="">
        </div>
        <div class="reg-left-txt">
          江苏荣运达科技股份有限公司于2020年5月注册成立，公司由扬州华荣再生资源有限公司和扬州宇恒物流有限公司及旗下的各分子公司业务合并运营，公司主营再生纸资源处理、销售、仓储物流，2020年7月起自主研发全国再生纸资源交易平台，公司总部位于江苏扬州，在全国江苏、湖北、安徽、湖南、浙江、重庆、四川等地投资建设近30个再生纸资源智能回收分拣打包厂，并在山鹰、荣成、永丰余等国内主要重大纸业工厂附近设立个办事处和智能仓储中心，公司成为中国纸资源行业智能利用先行者。
        </div>
      </div>
      <div class="reg-right">
        <img class="reg-right-img"
             src="../../../public/images/homePage/regard2.png"
             alt="">
      </div>
    </div>
    <!-- 业务板块 -->
    <div id="business">
      <div class="business-wrap">
        <div class="business-content">
          <div class="business-content-top">
            <img class="business-content-img1"
                 src="../../../public/images/homePage/business.png"
                 alt="">
          </div>
          <div class="business-content-bottom">
            <img src="../../../public/images/homePage/business2.png"
                 alt=""
                 class="business-content-img2">
          </div>
        </div>
      </div>
    </div>
    <!-- 营运项目 -->
    <div id="operation">
      <div class="operation-wrap">
        <div class="operation-top">
          <img class="operation-top-img"
               src="../../../public/images/homePage/operation1.png"
               alt="">
        </div>
        <div class="operation-bottom">
          <div class="operation-bottom-content">
            <img class="operation-bottom-img"
                 src="../../../public/images/homePage/operation2.png"
                 alt="">
            <div class="operation-bottom-txt">
              <h3>智能纸再生资源分拣中心</h3>
              <span>
                本中心主营再生纸资源的智能分拣打包，公司以"华荣"品牌全国连锁发展，目前已在江苏、湖北、浙江、重庆、四川等地建设了有近30家分厂，目前正在以每年2-3个的建厂速度快速扩张，提供纸再生资源再利用速度，同时公司加大智能设备装置的投资研发，提高打包生产效率。
              </span>
            </div>
          </div>
          <div class="operation-bottom-content">
            <img class="operation-bottom-img"
                 src="../../../public/images/homePage/operation3.png"
                 alt="">
            <div class="operation-bottom-txt">
              <h3>物流运输＋智能仓储中心</h3>
              <span>
                本中心主要承接打包中心、全国大型纸厂等纸品运输及纸品的仓储服务，公司以“宇恒”、“荣运达”品牌发展运输业务，做到高效、准时、安全的为客户提供长途专线运输服务。公司目前拥有自有大型牵引车200辆，同时掌握近千辆可随时调用的外部车辆，保证为客户的满意度。公司现在扬州、湖北拥有2个过万平米的智能仓储中心，公司目前计划在大型纸厂附件购置优质地块，投资建设智能仓储物流中心。
              </span>
            </div>
          </div>
          <div class="operation-bottom-content">
            <img class="operation-bottom-img"
                 src="../../../public/images/homePage/operation4.png"
                 alt="">
            <div class="operation-bottom-txt">
              <h3>再生纸资源交易平台</h3>
              <span>
                公司从2020年7月份起，自主投资研发全国纸品互联网交易平台－荣运达再生纸资源交易平台，公司抓住当今互联网时代的机会，基于云计算、物联网、大数据挖掘等技术，为全国的纸品原料供应商（打包中心）与纸厂原料收购商间搭建一个交易平台，解决纸厂原料供应需求量、价格等信息公开化，为其提供在线支付结算功能。
              </span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 公司组织架构 -->
    <div id="framework">
      <div class="framework-wrap">
        <div class="framework-img1">
          <img src="../../../public/images/homePage/framework1.png"
               alt="">
        </div>
        <div class="framework-img2">
          <img src="../../../public/images/homePage/framework2.png"
               alt="">
        </div>
      </div>
    </div>
    <!-- 合作伙伴 -->
    <div id="cooperation">
      <div class="cooperation-img1">
        <img src="../../../public/images/homePage/cooperation1.png"
             alt="">
      </div>
      <div class="cooperation-img2">
        <img src="../../../public/images/homePage/cooperation2.png"
             alt="">
      </div>
    </div>
    <!-- 团队简介 -->
    <div id="brief">
      <div class="brief-wrap">
        <div class="brief-content">
          <img src="../../../public/images/homePage/brief1.png"
               alt="">
          <div class="brief-content-right">
            <img src="../../../public/images/homePage/brief2.png"
                 alt="">
            <div class="brief-content-txt">
              公司董事长魏鹏飞先生自主创业10多年来，一直秉着＂以德为先，专业为本”用人理念，发展到如今近五百人团队，业务由传统单一发展至今以互联网科技为主等多元化发展的集团公司，公司引进了国内大型知名纸业公司的高级管理人员数名，本科以上人员占整个团队20%以上，一线业务人员均是行业内资深精英公司的健康快速发展夯实的基础。
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 线上App -->
    <div id="onLineApp">
      <div class="app-img">
        <img class="app-img-phone"
             style="display: block;"
             src="../../../public/images/homePage/app1.png"
             alt="">
        <img class="app-img-phone"
             src="../../../public/images/homePage/app2.png"
             alt="">
        <img class="app-img-phone"
             src="../../../public/images/homePage/app3.png"
             alt="">
        <img class="app-img-phone"
             src="../../../public/images/homePage/app4.png"
             alt="">
      </div>
      <div class="app-right">
        <img src="../../../public/images/homePage/app5.png"
             alt />
        <ul class="app-oul">
          <li>
            <a class="active btna"
               href="javascript:"
               @click="cuta">荣运达业务员</a>
          </li>
          <li>
            <a class="btna"
               href="javascript:"
               @click="cuta">荣运达供应商</a>
          </li>
          <li>
            <a class="btna"
               href="javascript:"
               @click="cuta">荣运达接货员</a>
          </li>
          <li>
            <a class="btna"
               href="javascript:"
               @click="cuta">荣运达司机</a>
          </li>
        </ul>
        <div class="app-txt"
             style="display: block;">
          荣运达业务员是一款专注废纸回收的采购平台，随时随地在线下单、发单等全流程智能操作，让回收废纸变得更便捷。
        </div>
        <div class="app-txt">
          荣运达供应商是一款专注废纸回收的采购平台，随时随地在线下单、发单等全流程智能操作，让回收废纸变得更便捷。
        </div>
        <div class="app-txt">
          荣运达接货员是一款专注废纸回收的验收平台，随时随地在线下单、收货、退货等全流程智能操作，让回收废纸变得更便捷。
        </div>
        <div class="app-txt">
          荣运达司机是一款专注货物运输的平台，随时随地在线发车、签收、申请支出等全流程智能操作，让货物运输变得更便捷。
        </div>
      </div>
    </div>
    <!-- 在招岗位 -->
    <div id="invite">
      <div class="invite-wrap">
        <div class="invite-h1">
          携手荣运达，共创美好未来
        </div>
        <div class="invite-h2">
          在招岗位
        </div>
        <div class="invite-content">
          <div class="invite-content-txt1">
            <div class="invite-content-h1">客服</div>
            <div class="invite-content-h2">全职 / 3000-5000元/月 / 不限 / 高中</div>
            <div class="invite-content-h2">发布时间：2020-07-13</div>
          </div>
          <div class="invite-content-txt1">
            <div class="invite-content-h1">咨讯部主任</div>
            <div class="invite-content-h2">全职 / 3000-5000元/月 / 不限 / 高中</div>
            <div class="invite-content-h2">发布时间：2020-07-13</div>
          </div>
          <div class="invite-content-txt1">
            <div class="invite-content-h1">会计（年龄28-35）</div>
            <div class="invite-content-h2">全职 / 3000-5000元/月 / 3-5年 / 大专</div>
            <div class="invite-content-h2">发布时间：2020-07-13</div>
          </div>
        </div>
      </div>
    </div>
    <!-- 底部栏 -->
    <div id="bottom">
      <div class="bottom-wrap">
        <div class="bottom-content">
          <div class="bottom-left">
            <div class="bottom-left-h1">
              联系我们
            </div>
            <div class="bottom-left-h2">
              江苏荣运达科技股份有限公司<br>
              地址：江苏省扬州市邗江区万象汇利大厦1304室<br>
              求职·招聘热线：18952760541<br>
              客服手机号：18952760541
            </div>
          </div>
          <div class="bottom-right">
            <div class="bottom-right-h1">
              安卓App扫码下载 ｜ 苹果App（直接在App store搜索荣运达下载）
            </div>
            <div class="bottom-right-con">
              <div class="bottom-right-txt">
                <img src="../../../public/images/homePage/salesman.png"
                     alt="">
                <h3>荣运达-业务员</h3>
              </div>
              <div class="bottom-right-txt">
                <img src="../../../public/images/homePage/supplier.png"
                     alt="">
                <h3>荣运达-供应商</h3>
              </div>
              <div class="bottom-right-txt">
                <img src="../../../public/images/homePage/reception.png"
                     alt="">
                <h3>荣运达-接货员</h3>
              </div>
              <div class="bottom-right-txt">
                <img src="../../../public/images/homePage/driver.png"
                     alt="">
                <h3>荣运达-司机</h3>
              </div>
            </div>
          </div>
        </div>
        <div class="bottom-base">
          © 2020 江苏荣运达科技股份有限公司 | 苏ICP备2020050743号-1
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { clickScroll, cutPicture, immobilizationNav } from '@/router/home'
import { swiper, swiperSlide } from "vue-awesome-swiper";
import "swiper/dist/css/swiper.css";
export default {
  name: "Home",
  components: {
    swiper,
    swiperSlide,
  },
  data () {
    return {
      timer: null,
      loop: [],
      swiperOption: {
        notNextTick: true,
        loop: true, //启用前后循环（最后一项左滑进入第一项）
        pagination: {
          el: ".swiper-pagination",
          clickable: true,
        },
        autoplay: true,
      },
    };
  },
  created () { },
  computed: {
    swiper () {
      return this.$refs.mySwiper.swiper;  //实例化swiper
    },
  },
  methods: {
    cutoli () {
     clickScroll()
    },
    cuta () {
      cutPicture()
    },
    handleScroll () {
      immobilizationNav()
    }
  },
  mounted () {
    this.cuta(),
    this.cutoli(),
    //监听页面滚动事件
    window.addEventListener("scroll", this.handleScroll)
  },
  destroyed () {
    //移除滚动事件
    document.removeEventListener('scroll', this.handleScroll)
  }
};
</script>

<style>
@import "../../../public/css/home.css";
</style>